import React from 'react';
import { Row, Col } from 'antd';
import { IconC, FirstHeaderC, ThreeHeaderC, PrimaryC, SecondHeaderC } from '../../components';

class IconCDemo extends React.Component {
  constructor() {
    super();
    this.state = {
      isDisabled: false,
      isSelect: false,
      clickSelect: [
        {
          key: 'defaultColor',
          isSelect: false,
        },
        {
          key: 'darkBlue',
          isSelect: false,
        },
        {
          key: 'redColor',
          isSelect: false,
        },
        {
          key: 'assetSplit',
          isSelect: false,
        },
        {
          key: 'menuManage',
          isSelect: false,
        },
        {
          key: 'researchManage',
          isSelect: false,
        },
        {
          key: 'squareUpArrow',
          isSelect: false,
        },
        {
          key: 'addNew',
          isSelect: false,
        },
      ],
    };
  }

  handleDisabled = () => {
    this.setState({
      isDisabled: true,
    });
  };

  handleUnDisabled = () => {
    this.setState({
      isDisabled: false,
    });
  };

  handleClick = (i) => {
    this.state.clickSelect.map((item, index) => {
      if (item.key == i) {
        item.isSelect = !item.isSelect;
      }
    });
    this.setState({
      clickSelect: [...this.state.clickSelect],
    });
  };

  handleClickChange = () => {
    this.state.clickSelect.map((item, index) => {
      item.isSelect = !item.isSelect;
    });
    this.setState({
      clickSelect: [...this.state.clickSelect],
    });
  };

  render() {
    const { isDisabled, clickSelect, isSelect } = this.state;
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='图标' />
        <div>
          <SecondHeaderC title='操作类图标' />
          <ThreeHeaderC title={'常规'} />
          <PrimaryC title={'点击切换所有点击效果'} onClick={this.handleClickChange} />
          <Row style={{ marginBottom: '20px' }} type='flex' justify='space-around' flexWrap='wrap'>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC title='新增' type={'newly'} style={{ margin: '10px' }} />
                <span>新增</span>
                <span>newly</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'toolTipEdit'} style={{ margin: '10px' }} />
                <span>新增</span>
                <span>toolTipEdit</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'addNew'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('addNew')} isSelect={isSelect || clickSelect[7].isSelect} />
                <span>新增</span>
                <span>addNew</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#bae1f1' }}>
                <IconC type={'addBlueNew'} style={{ margin: '10px' }} onClick={() => this.handleClick('addNew')} isSelect={isSelect || clickSelect[7].isSelect} />
                <span>有背景色新增</span>
                <span>addBlueNew</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'edit'} style={{ margin: '10px' }} />
                <span>编辑</span>
                <span>edit</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'editBlueTwo'} style={{ margin: '10px' }} />
                <span>编辑</span>
                <span>editBlueTwo</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'save'} style={{ margin: '10px' }} />
                <span>保存</span>
                <span>save</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'delete'} style={{ margin: '10px' }} />
                <span>删除</span>
                <span>delete</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'deleteBlueTwo'} style={{ margin: '10px' }} />
                <span>删除</span>
                <span>deleteBlueTwo</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'delWarning'} style={{ margin: '10px' }} />
                <span>删除</span>
                <span>delWarning</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'download'} style={{ margin: '10px' }} />
                <span>下载</span>
                <span>download</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'packUp'} style={{ margin: '10px' }} />
                <span>收起</span>
                <span>packUp</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'cancle'} style={{ margin: '10px' }} />
                <span>取消</span>
                <span>cancle</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC
                  type={'plus'}
                  style={{ margin: '10px' }}
                  onClick={(e) => {
                    console.log('e', e);
                  }}
                />
                <span>加</span>
                <span>plus</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'addBlue'} style={{ margin: '10px' }} />
                <span>加</span>
                <span>addBlue</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'minus'} style={{ margin: '10px' }} />
                <span>减</span>
                <span>minus</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'deleteYellow'} style={{ margin: '10px' }} />
                <span>减</span>
                <span>deleteYellow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'arrow'} style={{ margin: '10px' }} />
                <span>展开箭头</span>
                <span>arrow</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'downBtn'} style={{ margin: '10px' }} />
                <span>向下展开</span>
                <span>downBtn</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'squareDownArrow'} style={{ margin: '10px' }} onClick={() => this.handleClick('squareUpArrow')} isSelect={clickSelect[6].isSelect} />
                <span>向下展开</span>
                <span>squareDownArrow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'squareUpArrow'} style={{ margin: '10px' }} onClick={() => this.handleClick('squareUpArrow')} isSelect={clickSelect[6].isSelect} />
                <span>向上展开</span>
                <span>squareUpArrow</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'search'} style={{ margin: '10px' }} />
                <span>搜索</span>
                <span>search</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'filter'} style={{ margin: '10px' }} />
                <span>表格筛选过滤</span>
                <span>filter</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'play'} style={{ margin: '10px' }} />
                <span>播放</span>
                <span>play</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'notice'} style={{ margin: '10px' }} />
                <span>喇叭</span>
                <span>notice</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'position'} style={{ margin: '10px' }} />
                <span>定位</span>
                <span>position</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'clear'} style={{ margin: '10px' }} />
                <span>清除</span>
                <span>clear</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'defaultColor'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('defaultColor')} isSelect={clickSelect[0].isSelect} />
                <span>模板颜色默认</span>
                <span>defaultColor</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'darkBlue'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('darkBlue')} isSelect={clickSelect[1].isSelect} />
                <span>模板颜色深蓝</span>
                <span>darkBlue</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'redColor'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                <span>模板颜色橙红</span>
                <span>redColor</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'refresh'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('addNew')} isSelect={clickSelect[7].isSelect} />
                <span>刷新</span>
                <span>refresh</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'medal'} style={{ margin: '10px' }} onClick={() => this.handleClick('addNew')} isSelect={clickSelect[7].isSelect} />
                <span>勋章</span>
                <span>medal</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'person'} style={{ margin: '10px' }} onClick={() => this.handleClick('addNew')} isSelect={clickSelect[7].isSelect} />
                <span>个人</span>
                <span>person</span>
              </div>
            </Col>
          </Row>
          <ThreeHeaderC title={'可禁用'} />
          <PrimaryC title={'点击禁用'} onClick={this.handleDisabled} />
          <PrimaryC title={'点击不禁用'} onClick={this.handleUnDisabled} style={{ marginLeft: '10px' }} />
          <Row style={{ marginBottom: '20px' }} type='flex' justify='space-around' flexWrap='wrap'>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC
                  type={'deleteRed'}
                  style={{ margin: '10px' }}
                  isDisabled={isDisabled}
                  onClick={() => {
                    console.log(1111);
                  }}
                />
                {isDisabled ? <span>禁用删除</span> : <span>删除</span>}
                <span>deleteRed</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'deleteNew'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用删除</span> : <span>删除</span>}
                <span>deleteNew</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'account'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用计算器</span> : <span>计算器</span>}
                <span>account</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'saveIcon'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用保存</span> : <span>保存</span>}
                <span>saveIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'editNew'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用新增</span> : <span>新增</span>}
                <span>editNew</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'editNewIcon'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用编辑</span> : <span>编辑</span>}
                <span>editNewIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'threeArrowsDown'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用三箭头向下</span> : <span>三箭头向下</span>}
                <span>threeArrowsDown</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'threeArrowsUp'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用三箭头向上</span> : <span>三箭头向上</span>}
                <span>threeArrowsUp</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'oneArrowDown'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用单箭头向下</span> : <span>单箭头向下</span>}
                <span>oneArrowDown</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'oneArrowUp'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用单箭头向上</span> : <span>单箭头向上</span>}
                <span>oneArrowUp</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'doubleDownArrow'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用双层箭头向下</span> : <span>双层箭头向下</span>}
                <span>doubleDownArrow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'leftArrow'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用向左单箭头</span> : <span>向左单箭头</span>}
                <span>leftArrow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'rightArrow'} style={{ margin: '10px' }} isDisabled={isDisabled} />
                {isDisabled ? <span>禁用向右单箭头</span> : <span>向右单箭头</span>}
                <span>rightArrow</span>
              </div>
            </Col>
          </Row>
          <SecondHeaderC title={'特殊场景'} />
          <ThreeHeaderC title='isHover为false  没有悬停的动态变化，直接展示静态图片' />
          <Row style={{ marginBottom: '20px' }} type='flex' justify='space-around' flexWrap='wrap'>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC
                  style={{ width: '24px', height: '24px' }}
                  isHover={false} // 鼠标悬停是否更换图标
                  type={'edit'}
                  hoverAfter={false}
                />
                <span>编辑</span>
                <span>edit</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC
                  style={{ width: '24px', height: '24px' }}
                  isHover={false} // 鼠标悬停是否更换图标
                  type={'edit'}
                  onClick={(e) => {
                    console.log('编辑2', e);
                  }}
                  hoverAfter={true}
                />
                <span>编辑</span>
                <span>edit</span>
              </div>
            </Col>
          </Row>
          <SecondHeaderC title='展示类图标' />
          <ThreeHeaderC title={'固定大小'} />
          <Row style={{ marginBottom: '20px' }} type='flex' justify='space-around' flexWrap='wrap'>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'upRegulate'} style={{ margin: '10px' }} />
                <span>上调</span>
                <span>upRegulate</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'upArrow'} style={{ margin: '10px' }} />
                <span>上调</span>
                <span>upArrow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'outArrow'} style={{ margin: '10px' }} />
                <span>上调</span>
                <span>outArrow</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'downRegulate'} style={{ margin: '10px' }} />
                <span>下调</span>
                <span>downRegulate</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'downArrow'} style={{ margin: '10px' }} />
                <span>下调</span>
                <span>downArrow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'enterArrow'} style={{ margin: '10px' }} />
                <span>下调</span>
                <span>enterArrow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'money'} style={{ margin: '10px' }} />
                <span>金额</span>
                <span>money</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'info'} style={{ margin: '10px' }} />
                <span>提示</span>
                <span>info</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'warn'} style={{ margin: '10px' }} />
                <span>警告</span>
                <span>warn</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'downArrowGreen'} style={{ margin: '10px' }} />
                <span>向下箭头</span>
                <span>downArrowGreen</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'upArrowRed'} style={{ margin: '10px' }} />
                <span>向上箭头</span>
                <span>upArrowRed</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'videoBtn'} style={{ margin: '10px' }} />
                <span>视频</span>
                <span>videoBtn</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'buyIcon'} style={{ margin: '10px' }} />
                <span>买</span>
                <span>buyIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'sellIcon'} style={{ margin: '10px' }} />
                <span>卖</span>
                <span>sellIcon</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'greater'} style={{ margin: '10px' }} />
                <span>大于</span>
                <span>greater</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'less'} style={{ margin: '10px' }} />
                <span>小于</span>
                <span>less</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'rank'} style={{ margin: '10px' }} />
                <span>排名</span>
                <span>rank</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'incomeRate'} style={{ margin: '10px' }} />
                <span>率</span>
                <span>incomeRate</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'pass'} style={{ margin: '10px' }} />
                <span>通过</span>
                <span>pass</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'noPass'} style={{ margin: '10px' }} />
                <span>不通过</span>
                <span>noPass</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'tickIcon'} style={{ margin: '10px' }} />
                <span>√</span>
                <span>tickIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'crossIcon'} style={{ margin: '10px' }} />
                <span>×</span>
                <span>crossIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'successIcon'} style={{ margin: '10px' }} />
                <span>成功</span>
                <span>successIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'failureIcon'} style={{ margin: '10px' }} />
                <span>失败</span>
                <span>failureIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'applyIcon'} style={{ margin: '10px' }} />
                <span>提示</span>
                <span>applyIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'iconOne'} style={{ margin: '10px' }} />
                <span>icon1</span>
                <span>iconOne</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'iconTwo'} style={{ margin: '10px' }} />
                <span>icon2</span>
                <span>iconTwo</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'iconThree'} style={{ margin: '10px' }} />
                <span>icon3</span>
                <span>iconThree</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'illustrate'} style={{ margin: '10px' }} />
                <span>说明</span>
                <span>illustrate</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'otherIcon'} style={{ margin: '10px' }} />
                <span>其他图标</span>
                <span>otherIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'arrowBlueDown'} style={{ margin: '10px' }} />
                <span>蓝色展开向下箭头</span>
                <span>arrowBlueDown</span>
              </div>
            </Col>
          </Row>
          <ThreeHeaderC title={'可自定义大小,传入iconType=2为原始尺寸'} />
          <Row style={{ marginBottom: '20px' }} type='flex' justify='space-around' flexWrap='wrap'>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'titleIcon'} style={{ margin: '10px' }} iconType={'original'} titleColor={'red'} />
                <span>一级标题图标</span>
                <span>titleIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'titleIconTwo'} style={{ margin: '10px' }} iconType={'original'} />
                <span>二级标题图标</span>
                <span>titleIconTwo</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'titleIconThree'} style={{ margin: '10px' }} iconType={'original'} />
                <span>三级标题图标</span>
                <span>titleIconThree</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'productTitle'} style={{ margin: '10px' }} iconType={'original'} />
                <span>方形</span>
                <span>productTitle</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'ptrialTitle'} style={{ margin: '10px' }} iconType={'original'} />
                <span>三角</span>
                <span>ptrialTitle</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'userView'} style={{ margin: '10px' }} iconType={'original'} />
                <span>加号</span>
                <span>userView</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'userViewManage'} style={{ margin: '10px' }} iconType={'original'} />
                <span>用户视图管理</span>
                <span>userViewManage</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'aquareCombination'} style={{ margin: '10px' }} />
                <span>方形组合</span>
                <span>aquareCombination</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'userViewTip'} style={{ margin: '10px' }} iconType={'original'} />
                <span>提示</span>
                <span>userViewTip</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'holdTitle'} style={{ margin: '10px' }} iconType={'original'} />
                <span>半圆</span>
                <span>holdTitle</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'infoTitle'} style={{ margin: '10px' }} iconType={'original'} />
                <span>长方形</span>
                <span>infoTitle</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'marketTitle'} style={{ margin: '10px' }} iconType={'original'} />
                <span>排行</span>
                <span>marketTitle</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'analysisTitle'} style={{ margin: '10px' }} iconType={'original'} />
                <span>分析</span>
                <span>analysisTitle</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'barraProduct'} style={{ margin: '10px' }} iconType={'original'} />
                <span>圆形</span>
                <span>barraProduct</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'goldenOne'} style={{ margin: '10px' }} iconType={'original'} />
                <span>金色第一</span>
                <span>goldenOne</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'goldenTwo'} style={{ margin: '10px' }} iconType={'original'} />
                <span>金色第二</span>
                <span>goldenTwo</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'goldenThree'} style={{ margin: '10px' }} iconType={'original'} />
                <span>金色第三</span>
                <span>goldenThree</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'greyOne'} style={{ margin: '10px' }} iconType={'original'} />
                <span>灰色第一</span>
                <span>greyOne</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'greyTwo'} style={{ margin: '10px' }} iconType={'original'} />
                <span>灰色第二</span>
                <span>greyTwo</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'greyThree'} style={{ margin: '10px' }} iconType={'original'} />
                <span>灰色第三</span>
                <span>greyThree</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'noticeIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>公告</span>
                <span>noticeIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'toolIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>工具</span>
                <span>toolIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'excelIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>excel文件</span>
                <span>excelIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'imageIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图片文件</span>
                <span>imageIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'pdfIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>pdf文件</span>
                <span>pdfIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'unknownIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>未知文件</span>
                <span>unknownIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'videoIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>视频文件</span>
                <span>videoIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'wordIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>word文件</span>
                <span>wordIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'zipIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>压缩包文件</span>
                <span>zipIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'liabilityRatio'} style={{ margin: '10px' }} iconType={'original'} />
                <span>展示图标1</span>
                <span>liabilityRatio</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'share'} style={{ margin: '10px' }} iconType={'original'} />
                <span>展示图标2</span>
                <span>share</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'value'} style={{ margin: '10px' }} iconType={'original'} />
                <span>展示图标3</span>
                <span>value</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'vsIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>展示图标4</span>
                <span>vsIcon</span>
              </div>
            </Col>

            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'inFlow'} style={{ margin: '10px' }} iconType={'original'} />
                <span>一</span>
                <span>inFlow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'inFlowMoney'} style={{ margin: '10px' }} iconType={'original'} />
                <span>二</span>
                <span>inFlowMoney</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'moneyIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>三</span>
                <span>moneyIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'netMoney'} style={{ margin: '10px' }} iconType={'original'} />
                <span>四</span>
                <span>netMoney</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'number'} style={{ margin: '10px' }} iconType={'original'} />
                <span>五</span>
                <span>number</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'outFlow'} style={{ margin: '10px' }} iconType={'original'} />
                <span>六</span>
                <span>outFlow</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'outFlowMoney'} style={{ margin: '10px' }} iconType={'original'} />
                <span>七</span>
                <span>outFlowMoney</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'goIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>钟</span>
                <span>goIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'huIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>弧</span>
                <span>huIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'downloadVideo'} style={{ margin: '10px' }} iconType={'original'} />
                <span>下载视频</span>
                <span>downloadVideo</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'video'} style={{ margin: '10px' }} iconType={'original'} />
                <span>视频</span>
                <span>video</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'eventIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>事件</span>
                <span>eventIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'investmentIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>投资</span>
                <span>investmentIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'marketIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>市场</span>
                <span>marketIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'publishIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>出版</span>
                <span>publishIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'timeIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>时间</span>
                <span>timeIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'tipsIcon'} style={{ margin: '10px' }} iconType={'original'} />
                <span>建议</span>
                <span>tipsIcon</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'amountSumBg'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图标1</span>
                <span>amountSumBg</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'stockBg'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图标2</span>
                <span>stockBg</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'weigthBg'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图标3</span>
                <span>weigthBg</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'doneBg'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图标4</span>
                <span>doneBg</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'kzzsh'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图标5</span>
                <span>kzzsh</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'xptx'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图标6</span>
                <span>xptx</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'xqtx'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图标7</span>
                <span>xqtx</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'zqyctx'} style={{ margin: '10px' }} iconType={'original'} />
                <span>图标8</span>
                <span>zqyctx</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'rateMessage'} style={{ margin: '10px' }} iconType={'original'} />
                <span>汇率信息</span>
                <span>rateMessage</span>
              </div>
            </Col>
            <Col span={3}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <IconC type={'rateMessageRightArrow'} style={{ margin: '10px' }} iconType={'original'} />
                <span>汇率信息-箭头</span>
                <span>rateMessageRightArrow</span>
              </div>
            </Col>
          </Row>

          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='左侧菜单图标  需自定义大小，左侧菜单一般是16×16' />
            <Row style={{ marginBottom: '20px', backgroundColor: 'rgba(15, 21, 38, 1)', color: 'rgba(255, 255, 255, 0.65)' }} type='flex' justify='space-around' flexWrap='wrap'>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'assetSplit'}
                    style={{ margin: '10px', width: '16px', height: '16px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('assetSplit')}
                    isSelect={clickSelect[3].isSelect}
                  />
                  <span>菜单图标1</span>
                  <span>assetSplit</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'composite'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标2</span>
                  <span>composite</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'derivativesManagement'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('redColor')}
                    isSelect={clickSelect[2].isSelect}
                  />
                  <span>菜单图标3</span>
                  <span>derivativesManagement</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'inventoryMnt'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标4</span>
                  <span>inventoryMnt</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'management'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标5</span>
                  <span>management</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'marketAnalysis'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标6</span>
                  <span>marketAnalysis</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'menuManage'}
                    style={{ margin: '10px', height: '16px', width: '16px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('menuManage')}
                    isSelect={clickSelect[4].isSelect}
                  />
                  <span>菜单图标7</span>
                  <span>menuManage</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'operational'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标8</span>
                  <span>operational</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'performanceAnalysis'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('redColor')}
                    isSelect={clickSelect[2].isSelect}
                  />
                  <span>菜单图标9</span>
                  <span>performanceAnalysis</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'portfolioBuild'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标10</span>
                  <span>portfolioBuild</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'processManagement'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('redColor')}
                    isSelect={clickSelect[2].isSelect}
                  />
                  <span>菜单图标11</span>
                  <span>portfolioBuild</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'processManagement'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('redColor')}
                    isSelect={clickSelect[2].isSelect}
                  />
                  <span>菜单图标12</span>
                  <span>portfolioBuild</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'proposal'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标13</span>
                  <span>proposal</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'reportingServices'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('redColor')}
                    isSelect={clickSelect[2].isSelect}
                  />
                  <span>菜单图标14</span>
                  <span>reportingServices</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'riskAnalysis'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标15</span>
                  <span>riskAnalysis</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'riskMonitor'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标16</span>
                  <span>riskMonitor</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'securityMnt'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标17</span>
                  <span>securityMnt</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'systemManagement'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('redColor')}
                    isSelect={clickSelect[2].isSelect}
                  />
                  <span>菜单图标18</span>
                  <span>systemManagement</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'tradeInstruction'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('redColor')}
                    isSelect={clickSelect[2].isSelect}
                  />
                  <span>菜单图标19</span>
                  <span>tradeInstruction</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'userManage'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标20</span>
                  <span>userManage</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'researchManage'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('researchManage')}
                    isSelect={clickSelect[5].isSelect}
                  />
                  <span>菜单图标21</span>
                  <span>researchManage</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'assetPricing'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标22</span>
                  <span>assetPricing</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'bookManage'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标23</span>
                  <span>bookManage</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC
                    type={'OperationManagement'}
                    style={{ margin: '10px' }}
                    iconType={'original'}
                    onClick={() => this.handleClick('redColor')}
                    isSelect={clickSelect[2].isSelect}
                  />
                  <span>菜单图标24</span>
                  <span>OperationManagement</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'stressTest'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标25</span>
                  <span>stressTest</span>
                </div>
              </Col>
              <Col span={3}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <IconC type={'operate'} style={{ margin: '10px' }} iconType={'original'} onClick={() => this.handleClick('redColor')} isSelect={clickSelect[2].isSelect} />
                  <span>菜单图标26</span>
                  <span>operate</span>
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    );
  }
}
export default IconCDemo;
